<template>
  <commonTable
    ref="commonTableRef"
    rowKey="supplierId"
    :columns="roomTypeTableState.columns"
    :rules="[]"
    name="supplier"
    :addon="true"
    :create="true"
  >
    <template #form="{ record }">
      <a-form-item label="供应商名" name="supplierName">
        <a-input v-model:value="record.supplierName"></a-input>
      </a-form-item>
      <a-form-item label="联系电话" name="phone">
        <a-input v-model:value="record.phone"></a-input>
      </a-form-item>
    </template>
    <template #addon="{ record }">
      <a-button type="link" @click="handleClick(record)">编辑商品 </a-button>
    </template>
  </commonTable>
  <a-modal
    width="700px"
    title="入住登记"
    v-model:visible="modalGetInVisible"
    @ok="handleGetInOk"
  >
    <div style="margin-bottom: 20px">
      <a-button @click="handleAdd">新增</a-button>
      <a-button @click="handleDelete">删除</a-button>
    </div>
    <a-form ref="getInFormRef" :model="getInFormState">
      <a-row v-for="(item, index) in getInFormState.list" :key="index">
        <a-form-item
          :rules="[{ required: true, message: '必填' }]"
          label="姓名"
          :name="['list', index, 'name']"
        >
          <a-input v-model:value="item.name"></a-input>
        </a-form-item>
        <a-form-item
          :rules="[{ required: true, message: '必填' }]"
          label="身份证号"
          :name="['list', index, 'idCard']"
        >
          <a-input v-model:value="item.idCard"></a-input>
        </a-form-item>
      </a-row>
    </a-form>
  </a-modal>
  <a-modal
    :title="modalState.title"
    v-model:visible="modalState.visible"
    width="1000px"
  >
    <commonTable
      rowKey="productionId"
      :query="roomBookTableState.query"
      :params="roomBookTableState.query"
      name="productionSupplier"
      :create="true"
      :columns="roomBookTableState.columns"
    >
      <template #form="{ record }">
        <a-form-item
          :rules="[{ required: true, message: '必填' }]"
          label="商品名"
          name="productionId"
        >
          <h-select
            v-model:value="record.productionId"
            name="production"
          ></h-select>
        </a-form-item>
        <a-form-item
          :rules="[{ required: true, type: 'number', min: 0, message: '必填' }]"
          label="商品价格"
          name="price"
        >
          <a-input type="number" v-model:value.number="record.price"></a-input>
        </a-form-item>
      </template>
    </commonTable>
  </a-modal>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import commonTable from "../../utils/CommonTable";
import { useStore } from "vuex";
import { checkInRecord } from "@/api";
import HSelect from "@/components/HSelect";

const store = useStore();
const getInFormRef = ref();
const commonTableRef = ref();
const modalState = reactive({
  visible: false,
  title: "商品详细",
});
const handleClick = (record) => {
  roomBookTableState.query = { supplierId: record.supplierId };
  modalState.visible = true;
};
const roomBookTableState = reactive({
  columns: [
    {
      title: "商品名",
      dataIndex: "production.productionName",
    },
    {
      title: "商品价格",
      dataIndex: "price",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
  query: {},
});

const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "supplierId",
    },
    {
      title: "供应商名",
      dataIndex: "supplierName",
    },
    {
      title: "供应商品数",
      dataIndex: "production.length",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const getInFormState = reactive({
  list: [
    {
      name: "",
      idCard: "",
    },
  ],
});
const handleAdd = () => getInFormState.list.push({ name: "", idCard: "" });
const handleDelete = () =>
  getInFormState.list.length > 0 &&
  getInFormState.list.splice(getInFormState.list.length - 1, 1);
const modalGetInVisible = ref(false);
const thisRecord = ref();
const handleGetIn = async (record) => {
  thisRecord.value = record;
  modalGetInVisible.value = true;
  await nextTick();
  getInFormRef.value.resetFields();
  getInFormState.list = [{ name: "", idCard: "" }];
};
const handleGetInOk = async () => {
  await getInFormRef.value.validate();
  const payload = {
    bookId: thisRecord.value.bookId,
    userId: store.state.user.username || "123",
    isPay: 0,
    checkInInfo: getInFormState.list,
  };
  await checkInRecord.update(payload);
  modalGetInVisible.value = false;
  commonTableRef.value.getList();
};
</script>

<style scoped></style>
